<template>
  <el-image v-if="isExternal" :class="svgClass" :style="setIconSvgStyle" draggable="false" :src="url" fit="fill" />
  <svg v-else :class="svgClass" :style="setIconSvgStyle" aria-hidden="true">
    <use :href="symbolId" />
  </svg>
  <span :style="setIconSvgStyle" v-if="!!title">{{title}}</span>
</template>

<script setup lang="ts">
import {computed } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: {
    type: Number,
    default: () => 15,
  },
  className: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  }
})

const symbolId = computed(() => `#${props.name}`)
const url = computed(() => `${props.name}`)
const title = computed(() => `${props.title}`)

const external = (path:string) => {
  return /^(https?:|http?:)|\.(jpg|png|gif|svg|jpeg)$/.test(path)
}

const isExternal = computed(() => external(props.name))

const setIconSvgStyle = computed(() => {
  return `font-size: ${props.size}px !important;`;
});

const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`
  }
  return 'svg-icon'
})

</script>
<style scope>
.svg-icon {
  width: 1.1em;
  height: 1.1em;
  margin-left: 0.35em;
  margin-right: 0.35em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

</style>